<template>
  <div>
    <!-- 面包屑导航 -->
   

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
     

      <el-form-item>
        <div class="block" size="small"> <span class="demonstration">挂号时间:</span>
          <el-date-picker size="small" v-model="value2" type="datetimerange" :picker-options="pickerOptions"
            range-separator="-" start-placeholder="开始时间"  end-placeholder="结束时间" align="right">
          </el-date-picker>
        </div>
      </el-form-item>
        <!-- 接诊医生这里可以优化,后面可已发请求查询 所有接诊医生,然后绑定好  不用把数据写死 -->
       <el-form-item label="接诊医生">
        <el-select size="small" v-model="formInline.doctorName" placeholder="请选择" class="userRole" clearable>
            <el-option v-for="type in doctors" :label="type.key" :value="type.value" :key="type.value"></el-option>
        </el-select>
      </el-form-item>

       <el-form-item label="收费状态">
        <el-select size="small" v-model="formInline.chargeStatus" placeholder="请选择" class="userRole" clearable>
            <el-option v-for="type in chargeStatu" :label="type.key" :value="type.value" :key="type.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input size="small" v-model="formInline.nameOrPhone" placeholder="输入手机号或患者姓名" ></el-input>
      </el-form-item>  

      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中">

      <el-table-column prop="registerId" label="挂号单号" width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="date" label="挂号时间" width="180" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="idcard" label="患者编号" width="180" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="patientName" label="患者姓名" width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sex" label="患者性别" width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="age" label="患者年龄" width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号码" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="type" label="门诊类型" width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="diagnosis" label="诊断结果" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="office" label="诊断科室" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="doctorName" label="接诊医生" width="120" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="chargeStatus" label="收费状态" width="120" show-overflow-tooltip align="center">
          <template slot-scope="scope">
          <span v-if="scope.row.chargeStatus == 0">待收费</span>
          <span v-if="scope.row.chargeStatus == 1">已收费</span>
          <!-- <span v-if="scope.row.chargeStatus == 2">已退费</span> -->
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>
<script>
import axios from "axios";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      //时间段选择
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      doctors:[],
      chargeStatu:[
        {key: "待收费", value: 0 },
        {key: "已收费", value: 1 },
        // {key: "已退费", value: 2 },
      ],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",

      //查询后端数据存放的地方
      outpatient: {
        nameOrPhone: "",
        createTimeFront: "",
        createTimeBack: "",
        chargeStatus: "",
        doctorName:"",
        pageNum: "",
        pageSize:"",
      },
      formInline: {
        chargeStatus:"",
        doctorName:"",
        nameOrPhone:"",
        page: 1,
        limit: 10,
      },
      listData: [], //用户数据
      chargreS:['待收费','已收费','已退费'],

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
      Pagination,
  },

  /**
   * 创建完毕
   */
  created() {
    //显示列表数据
    this.getoutpatientlist();
    this.getDoctor();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getDoctor(){
       axios.post("/api/employee/selectAllEmployee?pageNum=1&pageSize=1000",{roleName:"医生"})
       .then((res) => {
          console.log('res',res);
          let doctorArr = new Array();
          for(let i = 0 ; i<  res.data.data.list.length ;i++){
            // let doctorMap = new Map();
            // doctorMap.put(res.data.data.list[i].name ,res.data.data.list[i].name);

            doctorArr.push({key:res.data.data.list[i].name,value:res.data.data.list[i].name})
          }
          // console.log("doctorArr",doctorArr);
          // console.log('doctorArr',doctorArr);
          this.doctors = doctorArr;
        })
        .catch((err) => {
            this.$message.error('请求错误,请联系我们的管理员111~~~')
        });
    },
    getoutpatientlist() {
       if(this.value2!==null&&this.value2!==""){
        this.outpatient.createTimeFront = this.value2[0];
        this.outpatient.createTimeBack = this.value2[1];
      }else{
        this.outpatient.createTimeFront=null;
        this.outpatient.createTimeBack=null;
      }
      this.outpatient.pageNum = this.formInline.page;
      this.outpatient.pageSize = this.formInline.limit;

      this.outpatient.nameOrPhone = this.formInline.nameOrPhone;
      this.outpatient.doctorName = this.formInline.doctorName;
      // console.log(this.formInline.chargeStatus);
      
      this.outpatient.chargeStatus = this.formInline.chargeStatus;

      console.log("this.outpatient",this.outpatient);
      axios.post("/api/outpatient/findOutpatientByCondition", this.outpatient)
        .then((res) => {
        //   this.loading = false;
          // console.log('结果是',res)
          // listData赋值

          this.listData = res.data.data.list;
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.limit;
          this.pageparm.total = res.data.data.total;
        })
        .catch((err) => {
            this.$message.error('请求错误,请联系我们的管理员~~~')
        });
      // this.outpatient.pageNum = this.formInline.page;
      // this.outpatient.pageSize = this.formInline.limit;
      
      // //发送请求,查询所有的诊断日志   
      // axios.post("/api/outpatient/findAllOutpatient", this.outpatient)
      // .then((res) => {
      //   // this.loading = false;
      //   this.listData = res.data.data.list;

      //   // console.log(this.listData);
      //   // 分页赋值
      //   this.pageparm.currentPage = this.formInline.page;
      //   this.pageparm.pageSize = this.formInline.limit;
      //   this.pageparm.total = res.data.data.total;
      // })
      // .catch((err) =>{
      //     this.$message.error('请求错误,请联系我们的管理员~~~')
      // });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getoutpatientlist();
        
    },
    // 搜索事件
    search() {
        //根据条件分页查询
      this.formInline.page = 1;
       this.getoutpatientlist();
      // if(this.value2!==null&&this.value2!==""){
      //   this.outpatient.createTimeFront = this.value2[0];
      //   this.outpatient.createTimeBack = this.value2[1];
      // }else{
      //   this.outpatient.createTimeFront=null;
      //   this.outpatient.createTimeBack=null;
      // }
      // this.outpatient.pageNum = this.formInline.page;
      // this.outpatient.nameOrPhone = this.formInline.nameOrPhone;
      // this.outpatient.doctorName = this.formInline.doctorName;
      // // console.log(this.formInline.chargeStatus);
      
      // this.outpatient.chargeStatus = this.formInline.chargeStatus;
      // // if (this.formInline.chargeStatus== '待收费') {
      // //   this.outpatient.chargeStatus = 0;
      // // }
      // // if(this.formInline.chargeStatus = '已收费'){
      // //   this.outpatient.chargeStatus = 1;
      // // }
      // // if(this.formInline.chargeStatus == '已退费'){
      // //   this.outpatient.chargeStatus = 2;
      // // }
      
      // // console.log(this.outpatient);
      
      // axios.post("/api/outpatient/findOutpatientByCondition", this.outpatient)
      //   .then((res) => {
      //   //   this.loading = false;
      //     // console.log('结果是',res)
      //     // listData赋值
      //     this.listData = res.data.data.list;
      //     // 分页赋值
      //     this.pageparm.currentPage = this.formInline.page;
      //     this.pageparm.pageSize = this.formInline.limit;
      //     this.pageparm.total = res.data.data.total;
      //   })
      //   .catch((err) => {
      //       this.$message.error('请求错误,请联系我们的管理员~~~')
      //   });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>